@charset "utf-8";
@import "../../../../layout/sass/_mixin-fun.scss";


span.checkbox {
	width: 10px;
    height: 10px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #888;
    display: none;
    overflow: hidden;
    i {
    	display: block;
    	width: 6px;
    	height: 100%;
    	margin-left: 2px;
    	position: relative;
    	overflow: hidden;
    	i.t1 {
		    display: inline;
		    height: 0;
		    width: 0;
		    overflow: hidden;
		    border: 6px solid transparent;
		    position: absolute;
		    left: -6px;
		    top: 2px;
		    border-top-color: #fff;
		}
		i.t2 {
		    height: 0;
		    width: 0;
		    overflow: hidden;
		    border: 5px solid transparent;
		    position: absolute;
		    left: -5px;
		    top: 1px;
		    border-top-color: #de4a4a;
		    display: none;
		}
    }
    &.sel {
    	background: #de4a4a;
    	border: none;
    	i.t2 {
    		display: block;
    	}
    }
}
.bread-path {
	width: 100%;
	background: white;
	margin-bottom: 10px;
	border-top: 1px solid #d4d4d4;
	.inner {
		padding: 10px 0;
		color: #555;
		position: relative;
		p.list {
			float: left;
			margin-right: 10px;
			a.cla {
				display: block;
				float: left;
				position: relative;
				color: #555;
				line-height: 26px;
				i {
					font-family: simsun;
					display: inline;
					padding: 0 7px;
					font-size: 14px;
					font-weight: 600;
				}
				span {
					display: inline;
				}
				&:hover {
					span {
						color: #de4a4a;
					}
				}
			}
		}//list
		a.sel {
			display: block;
			float: left;
			position: relative;
			padding: 3px 20px 3px 7px;
			border: 1px solid #e6e6e6;
			margin-left: 10px;
			color: #de4a4a;
			i {
				position: absolute;
				top: 3px;
				right: 5px;
				color: #e6e6e6;
			}
			&:hover {
				border-color: #de4a4a;
				i {
					color: #de4a4a;
				}
			}
		}//sel
		.t-num {
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -15px;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			i {
				color: #de4a4a;
				font-size: 16px;
			}
		}
	}//inner
}//bread-path

.a-list {
	width: 100%;
	.inner {
		margin-bottom: 50px;
		border: {
			top: 1px solid #e6e6e6;
			left: 1px solid #e6e6e6;
			right: 1px solid #e6e6e6;
		}
		position: relative;
		.subm-list {
			border-bottom: 1px solid #e6e6e6;
    		overflow: hidden;
    		position: relative;
    		height: 32px;
			overflow: hidden;
			padding: 4px 0;
			box-sizing: content-box;
			-webkit-box-sizing: content-box;
			-ms-box-sizing: content-box;
    		.subm-tab {
			    width: 110px;
			    line-height: 32px;
			    float: left;
			    color: #685244;
			    font-size: 14px;
			    padding-left: 10px;
			    font-weight: 600;
			}
			.subm-tab-info {
			    width: 920px;
			    float: left;
			    overflow: hidden;
			    ul {
					overflow: hidden;
					li {
					    width: 120px;
					    height: 32px;
					    text-align: left;
						float: left;
						will-change: transform;
						padding-right: 15px;
						padding-left: 15px;
						a {
							color: #555;
							position: relative;
							cursor: pointer;
							line-height: 32px;
							will-change: transform;
							display: block;
							width: 100%;
							@include transition(color, 0.3s, $function: ease);
							span {
								position: absolute;
							    left: -15px;
							    top: 50%;
							    margin-top: -5px;
							}
							&:hover {
								color: RGBA(222, 74, 74, 1);
								span {
									border: 1px solid #de4a4a;
								}
								span.sel {
									border: none;
								}
							}
						}//a
					}//li
			    }
			}//subm-tab-info
			.other-tab {
				width: 168px;
				height: 24px;
			    position: absolute;
			    right: 0;
			    top: 6.5px;
			    color: #888;
			    overflow: hidden;
			    will-change: transform;
			    button {
			    	position: relative;
			    	width: 50px;
			    	height: 24px;
			    	color: #555;
			    	margin-right: 10px;
			    	@include transition(all, 0.3s);
			    	&.hide {
			    		display: none;
			    	}
			    	&:hover {
			    		color: #de4a4a;
			    	}
			    	i {
			    		position: absolute;
			    		display: block;
			    		top: 0;
			    	}
			    	span.hide {
			    		display: none;
			    	}
			    	&.more {
			    		text-align: left;
			    		will-change: transform;
			    		position: absolute;
			    		top: 0;
			    		left: 74px;
			    		> i {
			    			right: 8px;
			    			display: block;
			    			width: 12px;
			    			height: 100%;
			    			@include transition(transform, 0.3s);
				    		i.t1 {
								right: 0;
								height: 0;
							    width: 0;
							    top: 50%;
							    margin-top: -2px;
							    overflow: hidden;
							    border: {
							    	top: 6px solid #555;
							    	left: 6px solid transparent;
							    	right: 6px solid transparent;
							    }
				    		}
				    		i.t2 {
								right: 0;
								height: 0;
							    width: 0;
							    top: 50%;
							    margin-top: -3px;
							    overflow: hidden;
							    border: {
							    	top: 6px solid white;
							    	left: 6px solid transparent;
							    	right: 6px solid transparent;
							    }
				    		}
			    		}
			    		&:hover {
			    			i {
			    				i.t1 {
									border: {
								    	top: 6px solid #de4a4a;
								    	left: 6px solid transparent;
								    	right: 6px solid transparent;
								    }
					    		}
			    			}
			    		}
			    		&.active {
			    			color: RGBA(222, 74, 74, 1);
			    			i.t1 {
								border: {
							    	top: 6px solid #de4a4a;
							    	left: 6px solid transparent;
							    	right: 6px solid transparent;
							    }
							    
				    		}
				    		> i {
				    			@include transform(rotate(180deg));
				    		}
			    		}
			    	}
			    	&.sel {
			    		text-align: right;
			    		position: absolute;
			    		top: 0;
			    		left: 0;
			    		i {
							left: 8px;
							height: 24px;
			    			line-height: 22px;
			    			font-weight: 700;
			    		}
			    		&.active {
				    		color: #de4a4a;
				    	}
			    	}
			    	&.confirm {
			    		border: 1px solid #de4a4a;
			    		color: #de4a4a;
			    		text-align: center;
			    		&:hover {
			    			background: #de4a4a;
			    			color: white;
			    		}
			    	}
			    	&.cancel {
			    		border: 1px solid #888;
			    		color: #888;
			    		text-align: center;
			    		&:hover {
			    			color: #de4a4a;
			    		}
			    	}
			    }//button
			}
		}//subm-list
		.other-list {
			width: 100%;
			height: 0;
			overflow: hidden;
		}
		span.see-more {
			width: 100px;
			height: 30px;
			border: {
				left: 1px solid #e6e6e6;
				right: 1px solid #e6e6e6;
				bottom: 1px solid #e6e6e6;
			}
			position: absolute;
			bottom: -29px;
			margin-left: -50px;
			left: 50%;
			line-height: 31px;
			text-align: center;
			color: #555;
			background: white;
			z-index: 1;
			cursor: pointer;
		}
	}//inner
}//a-list

.sort {
	width: 100%;
	z-index: 10;
	.inner {
		background: #F5F5F5;
		height: 40px;
		will-change: transform;
		border: 1px solid #e8e8e8;
		z-index: 5;
		position: relative;
		.btn {
			float: left;
			height: 40px;
			line-height: 38px;
			width: 60px;
			text-align: center;
			border: 1px solid #e8e8e8;
			color: #555;
			margin-left: -1px;
			margin-top: -1px;
			position: relative;
			cursor: pointer;
			> i.isort {
				display: inline-block;
				vertical-align: top;
    			display: none;
    			margin-top: 12px;
    			margin-left: -1px;
    			margin-right: -6px;
				> i {
					display: block;
				    height: 0;
				    width: 1px;
				    overflow: hidden;
				    border: 5px solid transparent;
				    border-bottom-color: #aaa;
				    margin-top: -5px;
				    @include content-box;
				}
				> em {
					display: block;
					margin-top: -9px;
				    height: 0;
				    width: 1px;
				    overflow: hidden;
				    border: 5px solid transparent;
				    border-bottom-color: #f5f5f5;
				    @include content-box;
				}
				> span {
					display: block;
				    height: 10px;
				    width: 0;
				    overflow: hidden;
				    border-left: 1px solid #aaa;
				    margin: -5px auto 0;
				    border-left-color: #aaa;
				    @include content-box;
				}
			}//i
			&:hover {
				background: white;
				> span {
					color: #de4a4a;
				}
				&.active > span {
					color: white;
				}
				> i.isort {
					i {
						border-bottom-color: #de4a4a;
					}
					em {
						border-bottom-color: #fff;
					}
					span {
						border-left-color: #de4a4a;
					}
				}
			}
			&.w-i {
				> i.isort {
					display: inline-block;
				}
			}
			&.active {
				color: white;
				background: #de4a4a;
				border-color: #de4a4a;
				> i.isort {
					display: inline-block;
					i {
						border-bottom-color: white;
					}
					em {
						border-bottom-color: #de4a4a;
					}
					span {
						border-left-color: white;
					}
				}
			}
			&.down {
				> i.isort {
					display: inline-block;
    				@include transform(rotate(180deg));
				}
			}
		}//btn
		.dropdown {
			float: left;
			height: 40px;
			line-height: 38px;
			text-align: center;
			border: 1px solid #e8e8e8;
			color: #555;
			margin-left: -1px;
			margin-top: -1px;
			position: relative;
			cursor: pointer;
			width: 90px;
			text-indent: -5px;
			> i.down {
				display: block;
				vertical-align: top;
			    height: 100%;
			    position: relative;
			    position: absolute;
			    top: 0;
			    right: 8px;
			    width: 12px;
				i {
				    right: 0;
				    height: 0;
				    width: 0;
				    top: 50%;
				    margin-top: -3px;
				    overflow: hidden;
				    border-top: 6px solid #aaa;
				    border-left: 6px solid transparent;
				    border-right: 6px solid transparent;
				    position: absolute;
				}
				em {
					right: 0;
				    height: 0;
				    width: 0;
				    top: 50%;
				    margin-top: -4px;
				    overflow: hidden;
				    border-top: 6px solid #f5f5f5;
				    border-left: 6px solid transparent;
				    border-right: 6px solid transparent;
				    position: absolute;
				}
			}
			> ul.pr {
				text-indent: 0;
				width: 482px;
				border: {
					left: 1px solid #e8e8e8;
					right: 1px solid #e8e8e8;
					bottom: 1px solid #e8e8e8;
				}
				display: none;
				position: absolute;
				top: 39px;
				left: -1px;
				background: white;
				z-index: 7;
				height: 320px;
				> li {
					float: left;
				    height: 40px;
				    width: 80px;
				    text-align: center;
				    position: relative;
				    z-index: 1;
				    line-height: 40px;
				    overflow: hidden;
				    text-overflow: ellipsis;
				    white-space: nowrap;
				    &.all {
				    	width: 100%;
				    	margin-bottom: 20px;
				    	border-bottom: 1px solid #e6e6e6;
				    	text-align: left;
				    	padding-left: 20px;
				    }
				    &:hover {
				    	color: #de4a4a;
				    }
				}//li
				ul.citys {
					background: #f5f5f5;
					position: absolute;
					z-index: 8;
					display: none;
					top: 40px;
					width: 240px;
					height: 280px;
					li {
						height: 40px;
						width: 80px;
						text-align: center;
						line-height: 30px;
						float: left;
						cursor: pointer;
						&:hover {
							color: #de4a4a;
						}
					}
					i.t1 {
						position: absolute;
						margin-top: -6px;
						left: -6px;
						border: {
							top: 6px solid transparent;
							bottom: 6px solid transparent;
							right: 6px solid #f5f5f5;
						}
						width: 0;
						height: 0;
						display: block;
					}
					i.t2 {
						position: absolute;
						margin-top: -6px;
						right: -6px;
						border: {
							top: 6px solid transparent;
							bottom: 6px solid transparent;
							left: 6px solid #f5f5f5;
						}
						width: 0;
						height: 0;
						display: block;
					}
				}//citys
			}//ul
			&.active {
				color: white;
				background: #de4a4a;
				border-color: #de4a4a;
			}
			&:hover {
				background: white;
				border-bottom: 1px solid white;
				> i.down {
					@include transform(rotate(180deg));
					i {
						border-top: 6px solid #de4a4a;
					}
					em {
						border-top: 6px solid #fff;
					}
				}
				> span {
					color: #de4a4a;
				}
			}
		}
		.price {
			float: left;
			height: 38px;
			border-right: 1px solid #e8e8e8;
			overflow: hidden;
			padding: 5px 10px;
			&.active {
				background: white;
				button {
					display: block;
				}
			}
			height: 100%;
			input {
				display: block;
				float: left;
				height: 28px;
				width: 66px;
				border: 1px solid #e8e8e8;
				background: white;
				line-height: 28px;
				color: #555;
				padding-left: 6px;
				&::-webkit-placeholder, &::-moz-placeholder, &:-ms-placeholder {
					color: #cacaca;
				}
				&.begin {
					width: 80px;
				}
			}//input
			span {
				float: left;
				padding: 0 3px;
				color: #888;
				display: block;
				line-height: 24px;
			}
			button {
				float: left;
				display: none;
				margin-left: 10px;
				height: 24px;
				padding: 0 5px;
				color: #de4a4a;
				border: 1px solid #de4a4a;
			}
		}//price
		.select {
			float: left;
			margin-left: 20px;
			height: 38px;
			line-height: 38px;
			cursor: pointer;
			span {
				display: inline-block;
			}//sapn
		}//sel
		.search-bar {
			position: absolute;
			right: 0;
			top: 0;
			height: 38px;
			padding: 3px 5px;
			background: white;
			display: none;
			input {
				width: 350px;
				padding: 0 10px;
				height: 100%;
				border: 2px solid #de4a4a;
			}
			span.twitter-typeahead {
				height: 100%;
				float: left;
				input.tt-input {
					float: left;
				}
				input.tt-hint {
					color: #a5a5a5;
		        }
				.tt-menu {
					border: 2px solid #de4a4a;
					top: 30px !important;
				}
			}
			button.conf {
				float: left;
				width: 60px;
				height: 100%;
				background: #de4a4a;
				color: white;
			}
		}//form-search
	}//inner
}//sort

.show-area {
	width: 100%;
	margin-top: 20px;
	position: relative;
	.inner {
		min-height: 500px;
		.no-goods {
			height: 330px;
			width: 100%;
			color: #de4a4a;
			font-size: 20px;
			text-align: center;
			line-height: 330px;
		}
		.left {
			width: 1000px;
			float: left;
			.one-block {
				width: 240px;
				display: block;
				float: left;
				margin-bottom: 28px;
				cursor: pointer;
				border: solid 1px #efefef;
				text-decoration: none;
				position: relative;
				margin-right: 10px;
				padding: 8px;
				i.get {
					position: absolute;
					top: 0;
					right: 0;
					width: 50px;
					height: 20px;
					background: #949494;
					display: none;
					font-size: 12px;
					text-align: center;
					line-height: 20px;
					cursor: pointer;
					color: white;
					z-index: 1;
					&.collected {
						background: #de4a4a;
					}
				}
				a.goods-link {
					display: block;
					overflow: hidden;
					p.img {
						width: 100%;
						height: 214px;
						overflow: hidden;
						img {
							width: 100%;
							height: 100%;
							@include transition(transform, 0.3s);
						}
					}
					p.shoes-price {
						height: 35px;
					    line-height: 35px;
					    font-size:18px;
					    color: #de4a4a;
					    margin-bottom: 5px;
					    margin-top: 14px;
					    position: relative;
					    i.icon {
					    	vertical-align: middle;
					    	margin-left: 5px;
					    	margin-top: -5px;
					    }
					}
					ul.inter {
						height: 50px;
						position: absolute;
						top: 215px;
						left: 0;
						width: 100%;
						FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr= white,endColorStr= #bd9f69); /*IE 6 7 8*/ 
						background: -ms-linear-gradient(top, #fff,  #bd9f69);
						background: -moz-linear-gradient(top, #fff, #f6f6f8);
						background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#fff), to(#bd9f69));
						background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bd9f69));
						background: -webkit-linear-gradient(top, #fff, #bd9f69);
						z-index: 1;
						padding: 5px 8px;
						opacity: 0;
						filter: Alpha(opacity=0);
						@include transition(opacity, 0.3s);
						li {
							float: left;
							width: 33.33333%;
							font-size: 13px;
							p {
								line-height: 21px;
								height: 21px;
								color: white;
								text-align: center;
								&.red {
									color: #de4a4a;
								}
							}
						}//li
					}//ul
					p.shoes-name {
						height: 34px;
					    line-height: 16px;
					    color: #555;
						overflow: hidden;
						width: 100%;
						margin-bottom: 5px;
					    &:hover {
					    	color: #de4a4a;
					    }
					}
				}//goods-link
				a.shoes-store {
					color: #a7a7a7;
				    height: 20px;
				    line-height: 20px;
				    margin-bottom: 10px;
				    display: block;
				    &:hover {
				    	color: #de4a4a;
				    }
				}
				p.shoes-nums {
					height: 25px;
				    line-height: 25px;
				    color: #888;
				    span {
						display: inline-block;
					    line-height: 25px;
					    i {
						    color: #de4a4a;
						    font-style: normal;
						}
						&.shoe-discuss{
						    float: left;	
						}
						&.deal-num{
							float: right;
						}
					}
				}//shoes-nums
				&:hover {
					border: solid 1px #ddd;
					box-shadow: 0 0 8px #ddd;
					img {
						@include transform(scale(1.08));
					}
					i.get {
						display: block;
					}
					a.goods-link ul.inter {
						opacity: 1;
						filter: Alpha(opacity=1);
					}
				}
			}//one-block
		}
		.right {
			width: 200px;
			float: right;
			p.title {
				width: 100%;
				height: 30px;
				line-height: 30px;
				color: #555;
				font-size: 16px;
				margin-bottom: 20px;
				border-bottom: 1px solid #e6e6e6;
				text-align: center;
			}
			.one-block {
				width: 100%;
				display: block;
				float: left;
				margin-bottom: 28px;
				cursor: pointer;
				border: solid 1px #efefef;
				text-decoration: none;
				position: relative;
				background: #f5f5f5;
				i.get {
					position: absolute;
					top: 0;
					right: 0;
					width: 50px;
					height: 20px;
					background: #949494;
					display: none;
					font-size: 12px;
					text-align: center;
					line-height: 20px;
					cursor: pointer;
					color: white;
					z-index: 1;
				}
				img {
					width: 100%;
					height: 204px;
					@include transition(opacity, 0.2s, $function: ease);
				}
				p.shoes-price {
					height: 35px;
				    line-height: 35px;
				    font-size: 18px;
				    color: #de4a4a;
				    margin-bottom: 5px;
				    margin-top: 14px;
				    padding: 0 5px;
				}
				p.shoes-name {
					max-height: 44px;
				    line-height: 20px;
				    color: #555;
				    padding: 0 5px;
				    width: 100%;
					overflow: hidden;
					margin-bottom: 10px;
				    &:hover {
				    	color: #de4a4a;
				    }
				}
				p.label {
					position: absolute;
					right: -3px;
					top: 210px;
					z-index: 1;
					width: 90px;
					@include transition(right, 0.2s, $function: ease);
					label {
						display: block;
						&.l1 {
							background: #de4a4a;
							color: white;
							border-right: 3px solid black;
							text-indent: 5px;
						}
						&.l2 {
							background: #e5e5e5;
							border-right: 3px solid #8d8d8d;
							color: #888;
							text-indent: 5px;
						}
					}
				}//label
				&:hover {
					border: solid 1px #de4a4a;
					img {
						opacity: 0.8;
					}
					i.get {
						display: block;
					}
					p.label {
						right: 0;
					}
				}
			}//one-block
		}
		.paging {
			text-align: center;
			float: left;
			width: 100%;
			margin-top: 22px;
			ul.pagination, ul.act {
				display: inline-block;
				li {
					font-size: 14px;
					a {
						color: #888;
					    border: 1px solid #D9D9D9;
					    margin-left: 10px;
					    padding: 8px 20px;
					    @include transition(all, 0.3s);
					    border-radius: 3px;
					    box-shadow: 0 1px 1px rgba(0,0,0,.1);
					}
				    &:hover {
				    	a {
				    		border-color: #CCC;
	    					background-color: #F5F5F5;
				    	}
				    }
				    &.active {
				    	a {
				    		color: #FFF;
					    	background-color: #de4a4a;
					    	border: 1px solid #de4a4a;
					    	cursor: default;
				    	}
				    }
				    &.disabled {
				    	a {
				    		color: #CCC;
						    background-color: #F8F8F8;
						    border-color: #E9E9E9;
				    	}
				    }
				    &.total {
						color: #555;
						line-height: 40px;
						padding: 0 8px;
						span {
							float: left;
							margin: 0 5px;
						}
						input {
							width: 60px;
							border: 1px solid #D9D9D9;
							float: left;
							font-size: 14px;
							text-align: center;
						}
					}
				}//li
			}//pagination
		}
	}//inner
}//show-area